<template>
	<!-- 后台订单管理 -->
	<div style="width: 100%;">
		<Header></Header>
		<div style="width: 1000px;margin: auto;margin-top: 30px;">
			<el-table :data="orders" style="width: 100%">

				<el-table-column type="expand">
					<template #default="scope">
						<div>

							<el-button size="small" type='daner' @click="showdizhi(scope.row.dzid)">收货地址</el-button>
							<el-button size="small" type='daner' @click="dingdan(scope.row.oid)">订单详情</el-button>

							<div style="width: 500px;margin: 50px;font-weight: 600;" v-if="show1">
								<span style="font-size: 16px;">
									收货地址</span><br>
								姓名:{{dizhi.uname}} <br>
								联系电话:{{dizhi.utel}}<br>
								详细地址:{{dizhi.sheng}}{{dizhi.city}}{{dizhi.qu}}{{dizhi.address}}<br>
							
							</div>
							<div v-if="show" style="width: 500px;margin: 0px auto;">
								<el-form :model="comments" :rules="rules" ref="comments">
									<el-form-item label="评价此商品" prop="content" label-width="600">
										<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="comments.content">
										</el-input>
									</el-form-item>
								</el-form>
							</div>
							<div v-if="show2" style="width: 80%;margin: 0px auto;">
								<el-table :data="ordersdesc" style="width: 100%">
									<el-table-column label="商品名" width="120">
										<template #default="scope">
											{{scope.row.goodsname}}
										</template>
									</el-table-column>
									<el-table-column label="图片" width="280">
										<template #default="scope">
											<img :src="'http://localhost:8080/' + scope.row.imgs" style="width: 180px;height:80px;" />
										</template>
									</el-table-column>
									<el-table-column label="单价" width="80">
										<template #default="scope">
											{{scope.row.money}}
										</template>
									</el-table-column>
									<el-table-column label="数量" width="80">
										<template #default="scope">
											{{scope.row.number}}
										</template>
									</el-table-column>
									<el-table-column label="总价" width="80" prop='moren'>
										<template #default="scope">
											{{scope.row.number*scope.row.money}}
										</template>
									</el-table-column>
									<el-table-column label="操作" width="120">
										<template #default="scope">
											<el-button size="small" type='daner' @click="getpj(scope.row.id)">查看评价</el-button>
										</template>
									</el-table-column>
								</el-table>
							</div>
							
							<div v-if="t==1" style="width: 80%;margin: 0px auto;">
								<el-table :data="pjs" style="width: 100%" >
									<el-table-column label="分数" width="180">
										<template #default="scope">
											<el-rate v-model="scope.row.fs" :colors="colors" show-score text-color="#ff9900">
											</el-rate>
										</template>
									</el-table-column>
									<el-table-column label="内容" width="200">
										<template #default="scope">
											{{scope.row.content}}
										</template>
									</el-table-column>
								
								
									<el-table-column label="时间" width="130" prop='moren'>
										<template #default="scope">
											{{formatTime(scope.row.ctime)}}
										</template>
									</el-table-column>
									<el-table-column label="发布者" width="100">
										<template #default="scope">
											***
											<input type="hidden" :value="scope.row.uid"/>
										</template>
									</el-table-column>
								</el-table>
								
							</div>
							
						</div>
					</template>
				</el-table-column>


				<el-table-column label="订单编号" width="300">
					<template #default="scope">
						{{scope.row.oid}}
					</template>
				</el-table-column>
				<el-table-column label="订单时间" width="180">
					<template #default="scope">
						{{formatTime(scope.row.otime)}}
					</template>

				</el-table-column>
				<el-table-column label="订单状态" width="150" prop='shzt'>
					<template #default="scope">
						<span v-if="scope.row.shzt==0">未发货</span>
						<span v-if="scope.row.shzt==2">已发货</span>
						<span v-if="scope.row.shzt==1">已确认</span>
					</template>
				</el-table-column>

				<el-table-column label="操作" min-width="200">
					<template #default="scope">
						<el-button size="small" :disabled='scope.row.shzt==1 || scope.row.shzt==2' type='daner' @click="queren(scope.row.oid)">确认发货</el-button>

					</template>
				</el-table-column>
			</el-table>
			

		</div>
	</div>
</template>

<script>
	import Axios from 'axios'
	import {
		ElMessageBox,
		ElMessage
	} from 'element-plus'
	import router from "../route/index.js"
	import Header from './Header'
	export default {
		name: 'OrdersManager',
		components: {
			Header
		},
		data() {
			return {
				orders: [],
				order: {},
				comments: {},
				show: false,
				dizhi: '',
				show1: false,
				show2: false,
				ordersdesc: [],
				temp: 0,
				pj: {},
				pjs: [],
				t: 0,
				rules: {
					content: [{
						required: true,
						message: '请填写评价',
						trigger: 'blur'
					}]
				}
			}
		},
		created() {
			this.getUsers();
			this.getOrders();
		},
		methods: {

			getpj(gid) {
				this.t = 1;
				this.pjs = []
				Axios.post('/shopmng/api/comments/selectById', {
					'gid': gid
				}).then(res => {
					this.pjs = res.data;
				});
			},
			queren(oid) {
				Axios.post('/shopmng/api/orders/updateZt2', {
					oid: oid
				}).then(res => {
					if (res.data.affectedRows > 0) {
						ElMessage({
							message: '确认成功',
							type: 'success',
						});
						this.getOrders();
					}
				});
			},
			pingjia(obj) {
				this.temp = 1;
				this.pj = obj;
				this.pj.gid = obj.id;
				this.pj.uid = this.users.uid;
			},
			addpj() {
				console.log(JSON.stringify(this.pj))
				Axios.post('/shopmng/api/comments/insertComments', this.pj).then(res => {
					if (res.data.affectedRows > 0) {}
				});
				Axios.post('/shopmng/api/ordersdesc/updateState', {
					oid: this.pj.oid,
					gid: this.pj.gid
				}).then(res => {
					if (res.data.affectedRows > 0) {
						ElMessage({
							message: '评价成功',
							type: 'success',
						});
						this.show2 = false
					}
				});
			},
			dingdan(oid) {
				this.show2 = true;
				this.pjs = [];
				Axios.post('/shopmng/api/ordersdesc/selectOrdersOid', {
					'oid': oid
				}).then(res => {
					this.ordersdesc = res.data;
				});
			},
			formatTime(val) {
				return val.substr(0, 10)
			},
			getUsers() {
				// 获取sessionstorage中的用户信息
				let str = sessionStorage.getItem('users')
				if (str != null) {
					//把字符串转换成对象 --- sessionStorage存的必须时字符串，所以取出来的也是字符串
					this.users = JSON.parse(str);
					return;
				}
			},
			getOrders() {
				Axios.post('/shopmng/api/orders/selectOrdes').then(res => {
					this.orders = res.data;
				});
			},
			showdizhi(dzid) {
				this.show1 = true;
				Axios.post('/shopmng/api/dizhi/selectById', {
					'did': dzid
				}).then(res => {
					let o = res.data[0];
					this.dizhi = o;
				});

			},
			addComments(val) {
				Axios.post('/shopmng/api/orders/selectOne', {
					'oid': val.oid
				}).then(res => {
					this.order = res.data[0];
					this.show = true;
					this.comments.gid = this.order.id;
					this.comments.oid = this.order.oid;
					this.comments.uid = this.order.uid;
				});
			},
			addContent(comments) {
				this.$refs[comments].validate(valid => {
					if (valid) {
						this.comments.content = this.comments.content;
						Axios.post('/shopmng/api/comments/insertComments', this.comments).then(res => {
							if (res.data.affectedRows > 0) {
								ElMessage({
									type: 'success',
									message: '评论成功！',
								});
								this.show = false;
								this.updatePingjia();
								this.getOrders();
							} else {
								ElMessage({
									type: 'info',
									message: '评论失败',
								})
							}
						});
					} else {
						return false
					}
				})
			},
			updatePingjia() {
				Axios.post('/shopmng/api/orders/updatePingjia', {
					'oid': this.comments.oid
				}).then(res => {
					this.orders = res.data;
				});
			}
		}
	}
</script>

<style>
</style>
